<template>
	<view class="forget">
		<view class="mt-8 flex-1 ml-3 row-ac" @click="toBack">
			<text class="iconfont icon-xiangzuo mr-1"></text>返回
		</view>
		<view class="flex-1 row">
			<view class="head-logo">
				<image :src="websiteInfo.Web_logo" mode=""></image>
			</view>
		</view>
		<view class="flex-1 mt-5 mx-7 row">
			<view class="">
				<view class="input-box row-ac">
					<view class="iconfont icon-shouji"></view>
					<view class="ml-3 input-item border-bottom">
						<input type="text" placeholder="用户手机号" v-model="loginQueryInfo.phone" value=""
							class="flex-1 py-3 px-2" />
					</view>
				</view>
				<view class="input-box row-ac mt-4">
					<view class="iconfont icon-shouji"></view>
					<view class="ml-3 input-item-tip border-bottom">
						<input type="text" placeholder="输入验证码" v-model="loginQueryInfo.smsCode" value=""
							class="flex-1 py-3 px-2" />
					</view>
					<view class="font-s-35 input-tip" @click="getCode" :disabled="disabled">
						{{ codeTime > 0 ? codeTime + 's' : '获取验证码' }}
					</view>
				</view>
				<view class="input-box row-ac mt-4">
					<view class="iconfont icon-mima"></view>
					<view class="ml-3 input-item border-bottom">
						<input :type="passwordType" placeholder="输入新密码" v-model="loginQueryInfo.password" value=""
							class="flex-1 py-3 px-2" />
					</view>
					<view class="iconfont icon-yj ml-2" @click="tapShow"></view>
				</view>
				<view class="input-box row-ac mt-4">
					<view class="iconfont icon-mima"></view>
					<view class="ml-3 input-item border-bottom">
						<input :type="passwordType" placeholder="再次输入新密码" v-model="spectpassword" value=""
							class="flex-1 py-3 px-2" />
					</view>
					<view class="iconfont icon-yj ml-2" @click="tapShow"></view>
				</view>
				
				<view class="flex-1 row mt-9">
					<view class="login-button row" @click="toReset"
						:class="loginInput  == true ? 'login-button-bg2' : 'login-button-bg1'">重置密码</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		resetpasswordUrl,
		usersmscodeUrl,
		websiteDetailUrl
	} from '@/api/index.js';
	export default {
		data() {
			return {
				loginQueryInfo: {
					password: '',
					phone: '',
					smsCode: '',
				},
				codeTime: 0,
				showpassword: true,
				spectpassword:'',
				websiteInfo:'',
			}
		},
		computed: {
			loginInput() {
				if (this.loginQueryInfo.password !== '' && this.loginQueryInfo.phone !== '' && this.loginQueryInfo.smsCode !== '') {
					return true
				} else {
					return false
				}
			},
			disabled() {
				if (this.codeTime > 0) {
					return true;
				}
				return false;
			},
			passwordType() {
				return this.showpassword ? 'password' : 'text';
			}
		},
		onLoad() {
			this.getWebsiteDetail()
		},
		methods:{
			getWebsiteDetail(){
				this.$R.get(websiteDetailUrl).then(res=>{
					this.websiteInfo = res.data
				})
			},
			//手机表单验证
			validata() {
				//手机号正则
				var mPattern = /^1[35789]\d{9}$/;
				//输出 true
				if (!mPattern.test(this.loginQueryInfo.phone)) {
					uni.showToast({
						title: '你输入的手机号不正确',
						icon: 'none'
					});
					return false;
				}
				return true;
			},
			getCode() {
				//防止重复获取
				if (this.codeTime > 0) {
					return;
				}
				//验证手机号
				if (!this.validata()) return;
				this.$R.get(usersmscodeUrl, this.loginQueryInfo).then(res => {
					if (res.code == 200) {
						this.codeTime = 60;
						let timer = setInterval(() => {
							if (this.codeTime >= 1) {
								this.codeTime--;
							} else {
								this.codeTime = 0;
								clearInterval(timer);
							}
						}, 1000);
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					} else if (res.code == 401) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					} else if (res.code == 204) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
			
				})
			},
			toReset(){
				if(this.loginQueryInfo.password !== this.spectpassword){
					uni.showToast({
						title: '输入的两次密码不一致',
						icon: 'none'
					});
				}else{
					this.$R.patch(resetpasswordUrl, this.loginQueryInfo).then(res=>{
						if (res.code == 200) {
							uni.showToast({
								title: '重置成功',
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1000);
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					})
				}
			},
			tapShow() {
				this.showpassword = !this.showpassword
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	.head-logo {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		background-color: #E4E4E4;
		margin-top: 68rpx;
		border: 1rpx solid #dee2e6;

		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
		}
	}

	.input-box {
		.input-item {
			width: 388rpx;
		}
		.input-item-tip{
			width: 280rpx;
		}
	}

	.input-code-box {
		padding: 32rpx;
		margin: 25rpx 0;
		box-shadow: 0 0 60rpx 0 rgba(43, 86, 112, .1);
		flex-direction: row;
		border-radius: 2.5rem;

		.code-box {
			width: 50%;
			color: #333333;
			border: none;

			input {
				flex: 1;
				text-align: left;
				font-size: 28rpx;
				padding-right: 10rpx;
				margin-left: 20rpx;
			}

		}

	}

	.login-button {
		width: 398rpx;
		height: 106rpx;
	}

	.login-button-bg1 {
		background-color: #E4E4E4;
	}

	.login-button-bg2 {
		background-color: #000;
		color: #fff;
	}

	.icon-yj {
		color: #999;
		font-size: 18px;
	}
</style>